<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>多功能摄像头管理系统</title>
		<link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
		<style>
			.layui-layout-admin .layui-body {
				padding-bottom: 0px;
				left: 0px;
			}
		</style>
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo layui-hide-xs layui-bg-black">多功能摄像头管理系统</div>
				<!-- 头部区域（可配合layui 已有的水平导航） -->
				<ul class="layui-nav layui-layout-left" lay-filter="demo">
					<!-- 移动端显示 -->
					<!-- <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
						<i class="layui-icon layui-icon-spread-left"></i>
					</li> -->

					<li class="layui-nav-item layui-hide-xs"><a href="javascript:;" data-url="live">直播</a>
					</li>
					<li class="layui-nav-item layui-hide-xs layui-this"><a href="javascript:;"
							data-url="config">配置</a></li>
					<li class="layui-nav-item layui-hide-xs"><a href="javascript:;" data-url="distinguish">智能识别结果</a>
					</li>
				</ul>
			</div>



			<div class="layui-body">
				<!-- 内容主体区域 -->
				<!-- <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div> -->
				<iframe src="config" frameborder="0" id="newPage"
					style="width: 100%; height: 100%; border-radius: 2px;"></iframe>

			</div>
		</div>
		<script src="../layui-v2.6.8/layui/layui.js"></script>
		<script>
			//JS 
			var element, $;
			layui.use(['element', 'layer', 'util'], function() {
				element = layui.element;
				$ = layui.$;

				element.on('nav(demo)', function(elem) {
					layer.msg(elem.text());
					$("#newPage").attr("src", elem.attr('data-url'))
				});
			});
		</script>
	</body>
</html>
